import 'package:flutter/material.dart';

class DepositPaymentWidget extends StatefulWidget {
  final String prePayEnd;

  final String? finalPayEnd;

  final VoidCallback callBack;

  const DepositPaymentWidget({super.key, required this.prePayEnd, required this.finalPayEnd, required this.callBack});

  @override
  State<DepositPaymentWidget> createState() => _DepositPaymentWidgetState();
}

class _DepositPaymentWidgetState extends State<DepositPaymentWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.symmetric(vertical: 20),
      color: Colors.white,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // Left side with step 1 and date
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                children: [
                  CircleAvatar(
                    radius: 10,
                    backgroundColor: Colors.orange.shade100,
                    child: const Text(
                      '1',
                      style: TextStyle(
                        fontSize: 12,
                        color: Colors.orange,
                      ),
                    ),
                  ),
                  const SizedBox(width: 5),
                  const Text(
                    '付定金',
                    style: TextStyle(
                      color: Colors.orange,
                      fontSize: 14,
                    ),
                  ),
                ],
              ),
              const SizedBox(height: 4),
              Text(
                '${widget.prePayEnd}截止',
                style: const TextStyle(
                  color: Colors.orange,
                  fontSize: 12,
                ),
              ),
            ],
          ),

          // Middle divider
          Expanded(
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 10.0),
              child: Divider(
                thickness: 1,
                color: Colors.grey.shade300,
                indent: 10,
                endIndent: 10,
              ),
            ),
          ),

          // Right side with step 2, additional text, and arrow icon
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                children: [
                  CircleAvatar(
                    radius: 10,
                    backgroundColor: Colors.grey.shade300,
                    child: const Text(
                      '2',
                      style: TextStyle(
                        fontSize: 12,
                        color: Colors.grey,
                      ),
                    ),
                  ),
                  const SizedBox(width: 5),
                  const Text(
                    '付尾款',
                    style: TextStyle(
                      color: Colors.grey,
                      fontSize: 14,
                    ),
                  ),
                ],
              ),
              const SizedBox(height: 4),
              Text(
                widget.finalPayEnd != null ? '${widget.finalPayEnd!}截止' : '当前活动无定金付款时间',
                style: const TextStyle(
                  color: Colors.grey,
                  fontSize: 12,
                ),
              ),
            ],
          ),
          const SizedBox(width: 5),
          GestureDetector(
            onTap: () {
              widget.callBack();
            },
            child: const Icon(
              Icons.chevron_right,
              color: Colors.grey,
            ),
          ),
        ],
      ),
    );
  }
}
